<!--    Created by PhpStorm.-->
<!--    User: xuwenqi-->
<!--    Date: 2018/1/9-->
<!--    Time: 下午6:39-->

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-tap-highlight" content="no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta content="email=no" name="format-detection">
    <title>红图 - 移动首页</title>
    <link rel="stylesheet" href="https://s.momocdn.com/w/u/others/2018/01/09/1515492530800-swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="root" v-cloak v-show="is_ready">
    <div class="top-part">
        <img class="left-icon" src="https://s.momocdn.com/w/u/others/custom/immomo/text-logo.png" alt="">
        <img v-if="!show_cover" @click="showCover()" class="right-icon" src="https://s.momocdn.com/w/u/others/custom/immomo/etc.png" alt="">
        <img v-else @click="hideCover()" class="close-icon" src="https://s.momocdn.com/w/u/others/custom/immomo/close.png" alt="">
        <div class="thin-line"></div>
    </div>
    <div v-if="is_ready" :class="['black-cover',first_show_cover?'show-cover':'',show_cover?'':'hide-cover']">
        <div :class="['main-group',show_cover?'':'hide-text']">
            <p @click="news">红图动态</p>
            <p @click="joinUs">加入我们</p>
            <p @click="aboutUs">关于陌陌</p>
        </div>
        <div :class="['bottom-group',show_cover?'':'hide-bottom-group']">
            <!-- <span @click="vipIndex">会员中心</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span @click="charge">在线充值</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span @click="adIndex">广告投放</span> -->
        </div>
        <p :class="['copyright',show_cover?'':'hide-copy-right']">@&nbsp;2018&nbsp;MOMO</p>
    </div>
    <!--<div :class="['swiper-container',show_cover?'stop-event':'']">-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--第一屏-->
            <!--<div class="swiper-slide" :style="{backgroundImage: 'url(' + webp_img + ')'}">-->
            <div class="swiper-slide">
                <img class="bg" :src="webp_img" alt="">
                <div :class="['page1',can_webp?'':'can_not_webp']">
                    <img class="main-text" src="https://s.momocdn.com/w/u/others/custom/immomo/big-text.png" alt="">
                    <div class='download-btn' @click=download()>下载红图</div>
                    <div class="text-group">
                        <!-- <p class="left-text" @click="buyVip">购买会员</p>
                        <div class="mid-line"></div>
                        <p class="right-text" @click="charge">在线充值</p> -->
                    </div>
                    <img class="next" src="https://s.momocdn.com/w/u/others/custom/immomo/next.png" alt="">
                </div>
            </div>
            <!--第二屏-->
            <div class="swiper-slide">
                <img :class="['layer3',active?'active3':'']" src="https://s.momocdn.com/w/u/others/custom/immomo/layer3.png" alt="">
                <img :class="['layer2',active?'active2':'']" src="https://s.momocdn.com/w/u/others/custom/immomo/layer2.png" alt="">
                <img :class="['layer1',active?'active1':'']" src="https://s.momocdn.com/w/u/others/custom/immomo/layer1.png" alt="">
                <div class="shade"></div>
                <p class="main-text">用红包&nbsp;一起玩</p>
                <p class="desc-text">大胆用红包，认识新朋友<br>聊天&nbsp;红包敲门&nbsp;快聊......</p>
                <div class='download-btn' @click=download()>下载红图</div>
                <img class="next" src="https://s.momocdn.com/w/u/others/custom/immomo/next.png" alt="">
            </div>
            <!--第三屏-->
            <div class="swiper-slide">
                <p class="main-text">总有新奇在身边</p>
                <p class="desc-text">从2000KM到0.01公里<br>不怕生</p>
                <img class="bottom-bg" src="https://s.momocdn.com/w/u/others/custom/immomo/page3.png" alt="">
                <div :class="bubble_anim?'anim':''">
                    <img v-for="(item, index) in bubble_list" :class="['bubble'+(index+1),'animb'+(index+1)]" :src="item" alt="">
                    <img v-for="(item, index) in face_list" :class="['emoji'+(index+1),'anime'+(index+1)]" :src="item" alt="">
                </div>
                <div class="shadow"></div>
                <div class='download-btn' @click=download()>下载红图</div>
                <img class="next" src="https://s.momocdn.com/w/u/others/custom/immomo/next.png" alt="">
            </div>
            <!--第四屏-->
            <div class="swiper-slide">
                <img class="bg" :src="webp_img" alt="">
                <div :class="['page4',can_webp?'':'can_not_webp']">
                    <img class="main-img" src="https://s.momocdn.com/w/u/others/custom/immomo/big-logo.png" alt="">
                    <div class='download-btn' @click=download()>下载红图</div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--检测浏览器是否支持webp-->
<img class="test-webp" src="https://s.momocdn.com/w/u/others/2017/12/28/1514440075531-icon.webp" alt="">
<script src="https://s.momocdn.com/w/js/2018/01/09/1515493648821-JP5dcb5a47b775111a4277b8b47e8f6384.js"></script>   <!--zepto,vue,mkbridge-sample-->
<script src="https://s.momocdn.com/w/u/others/2018/01/09/1515492489974-swiper.min.js"></script>
<script>
    var w = $(document.body).width();
    var h = $(document.body).height();
    if(w==0){
        $('html').css('font-size', '0px');
    }else{
        var x = (w / 375) * 50;
        $('html').css('font-size', x + 'px');
    }
    // 实例一个vue实例
    var app = new Vue({
        el:'#root',
        data:{
            is_ready:false,
            webp_img:'https://s.momocdn.com/w/u/others/2018/01/08/1515411314481-main.webp',
            can_webp:true,         //是否支持webp
            active:false,          //用来控制第二屏里各层的状态
            bubble_anim:false,     //用来控制第三屏气泡动画的开始
            first_show_cover:false,
            show_cover:false,      //控制半透明黑色遮罩的显示
            bubble_list:[],        //气泡图片list
            face_list:[],          //emoji图片list
        },
        created:function () {
            this.getImages();
        },
        mounted:function () {
            var _this = this;
            Vue.nextTick(function () {
                var mySwiper = new Swiper('.swiper-container', {
                    direction : 'vertical',
                    height: window.innerHeight,
                    speed:400,
                    preloadImages:true,
                    noSwiping:true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                    // autoplay: 1000,//可选选项，自动滑动
                    onSlideChangeStart: function(swiper){
                        if(swiper.activeIndex==1){
                            _this.active = true;
                        }
                        if(swiper.activeIndex!=1){
                            _this.active = false;
                        }
                        if(swiper.activeIndex==2){
                            _this.getImages();
                            _this.bubble_anim = true;
                        }
                        if(swiper.activeIndex!=2){
                            _this.bubble_anim = false;
                        }
                    }
                })
                _this.is_ready = true;
                if($('.test-webp').width()<300||mm.platform=='ios'){
                    // _this.webp_img = 'https://s.momocdn.com/w/u/others/custom/immomo/page1.png';
                    _this.webp_img = 'https://s.momocdn.com/w/u/others/2018/01/08/1515408510013-main.gif';
                    // _this.can_webp = false;
                }
            })
            // $('.swiper-container').css('height',h+'px')
        },
        methods:{
            setBubbleAnim:function () {},
            getImages:function () {
                var i = 0;
                var fn = Math.random();
                var fi = Math.floor(fn*5);
                var bi = Math.floor(fn*12);
                // emoji图片list
                for (i=0;i<3;i++){
                    this.face_list[i] = 'https://s.momocdn.com/w/u/others/custom/index/face'+[(fi+i)%5+1]+'.png';
                }
                // 气泡图片list
                for (i=0;i<4;i++){
                    this.bubble_list[i] = 'https://s.momocdn.com/w/u/others/custom/index_text/text'+[(bi+i)%12+1]+'.png';
                }
            },
            buyVip:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'https://www.immomo.com/pay_vip',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            charge:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'https://www.immomo.com/pay',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            vipIndex:function(){
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'http://www.immomo.com/vip',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            adIndex:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'http://ad.immomo.com/ad/home/login',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            news:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'http://www.immomo.com/newsroom',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            joinUs:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'http://www.immomo.com/jobs/join/index',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            aboutUs:function () {
                mm.ui.openUrl({
                    target: 1,   // 0:当前webview打开, 1:新的webview打开, 2:外部浏览器打开, 3:使用goto打开([x|x|x])
                    url: 'http://www.immomo.com/aboutus.html',
                    param:{}, //页面所需参数
                    pass: 0      // 是否为url添加passport，默认为 0-否，mm.version v3.3 add
                                 // (target=1且url不为momochat时有效) (client同学忽略)
                })
            },
            showCover:function () {
                this.first_show_cover = true;
                this.show_cover = true;
                $('.swiper-container').css('pointer-events','none');
                $('.swiper-container').css('height',h+'px');
            },
            hideCover:function () {
                this.show_cover = false;
                $('.swiper-container').css('pointer-events','all');
                $('.swiper-container').css('height','auto');
            },
            download:function(){
                // ios下载地址
                if(mm.platform=='ios'){
                    location.href = "http://www.immomo.com/download/ios/?d=&v=&mark=&market=&b=iOS_appstore"
                }else{
                    // android下载
                    location.href = "http://www.immomo.com/download/momo_apk?d=&v=&mark=&market=&b=android_apk"
                }
            }
        }
    })
</script>
</body>

</html>
